<a href='https://github.com/angular/angular.js/edit/v1.5.x/src/ng/animate.js?message=docs($animate)%3A%20describe%20your%20change...#L266' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.5.8/src/ng/animate.js#L266' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">$animate</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
  <li>
    <a href="api/ng/provider/$animateProvider">- $animateProvider</a>
  </li>

    <li>
      - service in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>The $animate service exposes a series of DOM utility methods that provide support
for animation hooks. The default behavior is the application of DOM operations, however,
when an animation is detected (and animations are enabled), $animate will do the heavy lifting
to ensure that animation runs with the triggered DOM operation.</p>
<p>By default $animate doesn&#39;t trigger any animations. This is because the <code>ngAnimate</code> module isn&#39;t
included and only when it is active then the animation hooks that <code>$animate</code> triggers will be
functional. Once active then all structural <code>ng-</code> directives will trigger animations as they perform
their DOM-related operations (enter, leave and move). Other directives such as <code>ngClass</code>,
<code>ngShow</code>, <code>ngHide</code> and <code>ngMessages</code> also provide support for animations.</p>
<p>It is recommended that the<code>$animate</code> service is always used when executing DOM-related procedures within directives.</p>
<p>To learn more about enabling animation support, click here to visit the
<a href="api/ngAnimate">ngAnimate module page</a>.</p>

</div>






<div>
  

    

  

  
<h2>Methods</h2>
<ul class="methods">
  <li id="on">
    <h3><p><code>on(event, container, callback);</code></p>

</h3>
    <div><p>Sets up an event listener to fire whenever the animation event (enter, leave, move, etc...)
   has fired on the given element or among any of its children. Once the listener is fired, the provided callback
   is fired with the following params:</p>
<pre><code class="lang-js">$animate.on(&#39;enter&#39;, container,
   function callback(element, phase) {
     // cool we detected an enter animation within the container
   }
);
</code></pre>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        event
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        container
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the container element that will capture each of the animation events that are fired on itself
    as well as among its children</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        callback
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">Function</a>
      </td>
      <td>
        <p>the callback function that will be fired when the listener is triggered</p>
<p>The arguments present in the callback function are:</p>
<ul>
<li><code>element</code> - The captured DOM element that the animation was fired on.</li>
<li><code>phase</code> - The phase of the animation. The two possible phases are <strong>start</strong> (when the animation starts) and <strong>close</strong> (when it ends).</li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="off">
    <h3><p><code>off(event, [container], [callback]);</code></p>

</h3>
    <div><p>Deregisters an event listener based on the event which has been associated with the provided element. This method
can be used in three different ways depending on the arguments:</p>
<pre><code class="lang-js">// remove all the animation event listeners listening for `enter`
$animate.off(&#39;enter&#39;);

// remove listeners for all animation events from the container element
$animate.off(container);

// remove all the animation event listeners listening for `enter` on the given element and its children
$animate.off(&#39;enter&#39;, container);

// remove the event listener function provided by `callback` that is set
// to listen for `enter` on the given `container` as well as its children
$animate.off(&#39;enter&#39;, container, callback);
</code></pre>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        event
        | container
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a><a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the animation event (e.g. enter, leave, move,
addClass, removeClass, etc...), or the container element. If it is the element, all other
arguments are ignored.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        container
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the container element the event listener was placed on</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        callback
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">Function=</a>
      </td>
      <td>
        <p>the callback function that was registered as the listener</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="pin">
    <h3><p><code>pin(element, parentElement);</code></p>

</h3>
    <div><p>Associates the provided element with a host parent element to allow the element to be animated even if it exists
   outside of the DOM structure of the Angular application. By doing so, any animation triggered via <code>$animate</code> can be issued on the
   element despite being outside the realm of the application or within another application. Say for example if the application
   was bootstrapped on an element that is somewhere inside of the <code>&lt;body&gt;</code> tag, but we wanted to allow for an element to be situated
   as a direct child of <code>document.body</code>, then this can be achieved by pinning the element via <code>$animate.pin(element)</code>. Keep in mind
   that calling <code>$animate.pin(element, parentElement)</code> will not actually insert into the DOM anywhere; it will just create the association.</p>
<p>   Note that this feature is only active when the <code>ngAnimate</code> module is used.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the external element that will be pinned</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        parentElement
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the host parent element that will be associated with the external element</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="enabled">
    <h3><p><code>enabled([element], [enabled]);</code></p>

</h3>
    <div><p>Used to get and set whether animations are enabled or not on the entire application or on an element and its children. This
function can be called in four ways:</p>
<pre><code class="lang-js">// returns true or false
$animate.enabled();

// changes the enabled state for all animations
$animate.enabled(false);
$animate.enabled(true);

// returns true or false if animations are enabled for an element
$animate.enabled(element);

// changes the enabled state for an element and its children
$animate.enabled(element, true);
$animate.enabled(element, false);
</code></pre>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element that will be considered for checking/setting the enabled state</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        enabled
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p>whether or not the animations will be enabled for the element</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>whether or not animations are enabled</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="cancel">
    <h3><p><code>cancel(animationPromise);</code></p>

</h3>
    <div><p>Cancels the provided animation.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        animationPromise
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-promise">Promise</a>
      </td>
      <td>
        <p>The animation promise that is returned when an animation is started.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="enter">
    <h3><p><code>enter(element, parent, [after], [options]);</code></p>

</h3>
    <div><p>Inserts the element into the DOM either after the <code>after</code> element (if provided) or
  as the first child within the <code>parent</code> element and then triggers an animation.
  A promise is returned that will be resolved during the next digest once the animation
  has completed.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which will be inserted into the DOM</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        parent
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the parent element which will append the element as
  a child (so long as the after element is not present)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        after
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the sibling element after which the element will be appended</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="move">
    <h3><p><code>move(element, parent, [after], [options]);</code></p>

</h3>
    <div><p>Inserts (moves) the element into its new position in the DOM either after
  the <code>after</code> element (if provided) or as the first child within the <code>parent</code> element
  and then triggers an animation. A promise is returned that will be resolved
  during the next digest once the animation has completed.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which will be moved into the new DOM position</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        parent
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the parent element which will append the element as
  a child (so long as the after element is not present)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        after
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the sibling element after which the element will be appended</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="leave">
    <h3><p><code>leave(element, [options]);</code></p>

</h3>
    <div><p>Triggers an animation and then removes the element from the DOM.
When the function is called a promise is returned that will be resolved during the next
digest once the animation has completed.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which will be removed from the DOM</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="addClass">
    <h3><p><code>addClass(element, className, [options]);</code></p>

</h3>
    <div><p>Triggers an addClass animation surrounding the addition of the provided CSS class(es). Upon
  execution, the addClass operation will only be handled after the next digest and it will not trigger an
  animation if element already contains the CSS class or if the class is removed at a later step.
  Note that class-based animations are treated differently compared to structural animations
  (like enter, move and leave) since the CSS classes may be added/removed at different points
  depending if CSS or JavaScript animations are used.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which the CSS classes will be applied to</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        className
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>the CSS class(es) that will be added (multiple classes are separated via spaces)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="removeClass">
    <h3><p><code>removeClass(element, className, [options]);</code></p>

</h3>
    <div><p>Triggers a removeClass animation surrounding the removal of the provided CSS class(es). Upon
  execution, the removeClass operation will only be handled after the next digest and it will not trigger an
  animation if element does not contain the CSS class or if the class is added at a later step.
  Note that class-based animations are treated differently compared to structural animations
  (like enter, move and leave) since the CSS classes may be added/removed at different points
  depending if CSS or JavaScript animations are used.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which the CSS classes will be applied to</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        className
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>the CSS class(es) that will be removed (multiple classes are separated via spaces)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="setClass">
    <h3><p><code>setClass(element, add, remove, [options]);</code></p>

</h3>
    <div><p>Performs both the addition and removal of a CSS classes on an element and (during the process)
   triggers an animation surrounding the class addition/removal. Much like <code>$animate.addClass</code> and
   <code>$animate.removeClass</code>, <code>setClass</code> will only evaluate the classes being added/removed once a digest has
   passed. Note that class-based animations are treated differently compared to structural animations
   (like enter, move and leave) since the CSS classes may be added/removed at different points
   depending if CSS or JavaScript animations are used.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which the CSS classes will be applied to</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        add
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>the CSS class(es) that will be added (multiple classes are separated via spaces)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        remove
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>the CSS class(es) that will be removed (multiple classes are separated via spaces)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="animate">
    <h3><p><code>animate(element, from, to, [className], [options]);</code></p>

</h3>
    <div><p>Performs an inline animation on the element which applies the provided to and from CSS styles to the element.
If any detected CSS transition, keyframe or JavaScript matches the provided className value, then the animation will take
on the provided styles. For example, if a transition animation is set for the given classNamem, then the provided <code>from</code> and
<code>to</code> styles will be applied alongside the given transition. If the CSS style provided in <code>from</code> does not have a corresponding
style in <code>to</code>, the style in <code>from</code> is applied immediately, and no animation is run.
If a JavaScript animation is detected then the provided styles will be given in as function parameters into the <code>animate</code>
method (or as part of the <code>options</code> parameter):</p>
<pre><code class="lang-js">ngModule.animation(&#39;.my-inline-animation&#39;, function() {
  return {
    animate : function(element, from, to, done, options) {
      //animation
      done();
    }
  }
});
</code></pre>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        element
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-domelement">DOMElement</a>
      </td>
      <td>
        <p>the element which the CSS styles will be applied to</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        from
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>the from (starting) CSS styles that will be applied to the element and across the animation.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        to
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>the to (destination) CSS styles that will be applied to the element and across the animation.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        className
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>an optional CSS class that will be applied to the element for the duration of the animation. If
   this value is left as empty then a CSS class of <code>ng-inline-animate</code> will be applied to the element.
   (Note that if no animation is detected then this value will not be applied to the element.)</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">object</a>
      </td>
      <td>
        <p>an optional collection of options/styles that will be applied to the element.
  The object can have the following properties:</p>
<ul>
<li><strong>addClass</strong> - <code>{string}</code> - space-separated CSS classes to add to element</li>
<li><strong>from</strong> - <code>{Object}</code> - CSS properties &amp; values at the beginning of animation. Must have matching <code>to</code></li>
<li><strong>removeClass</strong> - <code>{string}</code> - space-separated CSS classes to remove from element</li>
<li><strong>to</strong> - <code>{Object}</code> - CSS properties &amp; values at end of animation. Must have matching <code>from</code></li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">Promise</a></td>
    <td><p>the animation callback promise</p>
</td>
  </tr>
</table>
    

  </li>
  </ul>
  
  



  
</div>


